<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Registration</title>
<style type="text/css">
#title {
	padding: 50px;
}
.userInfo {
	border: thin groove #000;
	width: auto;
}
</style>
</head>

<body bgcolor="#bbccff">
<div>
<div id="title" align="center"><img src="../images/title.png" width="431" height="114" align="middle"></div>
<div>

<form name="loginform" action="register.php" method = "post" onSubmit="return checkLength()" >

<table align="center" class="userInfo">
	<tr align="center">
    	<td height="53" colspan="2" valign="middle">New User?</td>
    </tr>
    <tr>
    	<td height="53">First Name: </td>
		<td><input maxlength="15" type="text" name="firstname"></td>
    </tr>
    <tr>
    	<td height="53">Last Name:</td>
        <td><input maxlength="15" type="text" name="lastname"></td>
    </tr>
     <tr>
    	<td height="53">Username:</td>
        <td><input maxlength="15" type="text" name="username"></td>
    </tr>
     <tr>
    	<td height="53">Password:</td>
        <td><input maxlength="15" type="password" name="password"></td>
    </tr>
     <tr>
    	<td height="53">Confirm Password:</td>
        <td><input maxlength="15" type="password" name="confirmPassword"></td>
    </tr>
     <tr>
    	<td height="53">Email:</td>
        <td><input type="email" name="email"></td>
    </tr>
    <tr>
    	<td height="53">Confirm Email:</td>
        <td><input type="email" name="confirmEmail"></td>
    </tr>
    <tr>
    	<td height="53" colspan="2" align="center"><input type="submit" value="Register" > 
    </tr>
</table>
</form>
<p align="center"><a href="../../index.html"/>Login</p>
</div>
</div>

<script type="text/javascript">
function checkLength()
{
var pass = document.loginform.password.value.length;
var username = document.loginform.username.value.length;
var firstname = document.loginform.firstname.value.length;
var lastname = document.loginform.lastname.value.length;
var betapass = document.loginform.betapass.value.length;

if(pass < 8)
{
document.getElementById("error").style.display = "none";
document.getElementById("shortPass").style.display = "inline";
document.loginform.password.style.background = 'Red';
return false;
}

else{
document.loginform.password.style.background = 'White';
document.getElementById("shortPass").style.display = "none";
}

if(firstname == 0){
document.getElementById("error").style.display = "inline";
document.loginform.firstname.style.background = 'Red';
return false;
}

else{
document.loginform.firstname.style.background = 'White';
document.getElementById("error").style.display = "none";
}

if(lastname == 0){
document.getElementById("error").style.display = "inline";
document.loginform.lastname.style.background = 'Red';
return false;
}

else{
document.loginform.lastname.style.background = 'White';
document.getElementById("error").style.display = "none";
}

if(username == 0){
document.getElementById("error").style.display = "inline";
document.loginform.username.style.background = 'Red';
return false;
}

else{
document.loginform.username.style.background = 'White';
document.getElementById("error").style.display = "none";
}

if(betapass == 0){
document.getElementById("error").style.display = "inline";
document.loginform.betapass.style.background = 'Red';
return false;
}

else{
document.loginform.betapass.style.background = 'White';
document.getElementById("error").style.display = "none";
}

return true;
}

</script>

<script type="text/javascript">
function checkEmpty(element)
{	
	if(element.value.length == 0)
	{
	document.getElementById("shortPass").style.display = 	"none";
	document.getElementById("error").style.display = "inline";
	element.style.background = 'Red';
	return false;
	}

	document.getElementById("error").style.display = "none";
	element.style.background = 'White';
	return true;
}
</script>

</body>
</html>
